<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{:$page_info['title']}</title>
<link rel="icon" href="favicon.ico" type="image/ico">

<meta name="author" content="yinqi">
<link href="__STATIC__/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="__STATIC__/admin/css/materialdesignicons.min.css" rel="stylesheet">
<link href="__STATIC__/admin/css/style.min.css" rel="stylesheet">

<link href="__STATIC__/common/select2/select2.css" rel="stylesheet">
<link href="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">

<link href="__STATIC__/admin/css/cch.css" rel="stylesheet">
<style type="text/css">
    .tubiao {width: 100%;height:480px;}
    .prev-span {font-size: 14px;display: block;}
</style>
</head>
  
<body>
<div class="container-fluid p-t-15">
    

    <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-toolbar clearfix" style="padding-top: 10px;">
              <form class="pull-right search-bar" method="get" action="{:url($page_info['action'])}" role="form">
                {include file="html/search" /}
              </form>
              <div class="toolbar-btn-action">
                <a class="btn btn-success m-r-5 search_btn" href="javascript:void(0)"><i class="mdi mdi-magnify"></i> 搜索</a>
              </div>
            </div>
          </div>
        </div>
    </div>



  <div class="row">
    <div class="col-sm-6 col-md-3">
      <div class="card bg-success">
        <div class="card-body clearfix">
          <div class="pull-right">
            <p class="h6 text-white m-t-0">名称</p>
            <p class="h3 text-white m-b-0 fa-1-5x top1"></p>
          </div>
          <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-md-3">
      <div class="card bg-primary">
        <div class="card-body clearfix">
          <div class="pull-right">
            <p class="h6 text-white m-t-0">账单总金额</p>
            <p class="h3 text-white m-b-0 fa-1-5x top2"></p>
          </div>
          <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
        </div>
      </div>
    </div>
    
    <div class="col-sm-6 col-md-3">
      <div class="card bg-danger">
        <div class="card-body clearfix">
          <div class="pull-right">
            <p class="h6 text-white m-t-0">账单实例数</p>
            <p class="h3 text-white m-b-0 fa-1-5x top3"></p>
          </div>
          <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
        </div>
      </div>
    </div>
    
    
    
    <div class="col-sm-6 col-md-3">
      <div class="card bg-purple">
        <div class="card-body clearfix">
          <div class="pull-right">
            <p class="h6 text-white m-t-0">累计充值</p>
            <p class="h3 text-white m-b-0 fa-1-5x top4"></p>
          </div>
          <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
        </div>
      </div>
    </div>
  </div>

  <style type="text/css">
      .header_sel {float: right;width: 120px;height: auto;padding: 0 12px;}
  </style>

  
  <div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>产品实例数占比</h4>
                <select class="form-control header_sel" id="cpslszb_sel">
                    <?php foreach ($model_dates as $param_k => $param_v): ?>
                        <option value="{:$param_v['key']}">{:$param_v['name']}</option>
                    <?php endforeach ?>
                </select>
            </div>
            <div class="card-body">
                <div id="cpslszb" class="tubiao">加载中</div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>产品金额占比</h4>
                <select class="form-control header_sel" id="cpjezb_sel">
                    <?php foreach ($model_dates as $param_k => $param_v): ?>
                        <option value="{:$param_v['key']}">{:$param_v['name']}</option>
                    <?php endforeach ?>
                </select>
            </div>
            <div class="card-body">
                <div id="cpjezb" class="tubiao">加载中</div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>每日充值统计</h4>
            </div>
            <div class="card-body">
                <div id="mrcztj" class="tubiao">加载中</div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>每日消费统计</h4>
            </div>
            <div class="card-body">
                <div id="mrxftj" class="tubiao">加载中</div>
            </div>
        </div>
    </div>

    
  </div>
  
</div>

<script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/main.min.js"></script>

<!-- 时间选择器 -->
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="__STATIC__/admin/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>

<script src="__STATIC__/common/select2/select2.min.js"></script><!-- 下拉搜索 -->

<!-- 图表 -->
<script src="__STATIC__/common/echarts/echarts.js"></script>
<script src="__STATIC__/common/echarts/customed.js"></script>

<script type="text/javascript" src="__STATIC__/admin/js/lyear-loading.js"></script><!-- loading -->
<script type="text/javascript" src="__STATIC__/admin/js/cch.js"></script>
<script type="text/javascript">
    $("#model_date_sel").on('change',function(){
        var l = $('body').lyearloading({
            opacity: 0.5,
            spinnerSize: 'lg',
            spinnerText: '刷新中',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        window.location.href = '{:url('selDate',[],'')}?key='+$(this).val();
    });
</script>
<script type="text/javascript">
    var option_pie = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                data: [
                    
                ]
            }
        ]
    };

    var option_bar = {
        title: {
            text: ''
        },
        tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
            trigger: 'axis',  
            axisPointer: { // 坐标轴指示器配置项。  
                type: 'none', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
                axis: 'auto', // 指示器的坐标轴。   
                snap: true, // 坐标轴指示器是否自动吸附到点上  
            }, 
            showContent: true,  
        }, 
        xAxis: {
            type: 'value'
        },
        yAxis: {
            inverse: true,
            type: 'category',
            data: [],
            axisLabel: {
                textStyle: {
                    fontSize: '11'
                },
                show: true,
                interval: 0
            }
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                label: {
                    show: true,
                    position: 'right',
                },

                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    var option_line = {
        title: {
            text: ''
        },
        tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
            trigger: 'axis',  
            axisPointer: { // 坐标轴指示器配置项。  
                type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
                axis: 'auto', // 指示器的坐标轴。   
                snap: true, // 坐标轴指示器是否自动吸附到点上  
            }, 
            showContent: true,  
        },  
        // toolbox: {   // 右上角的工具框（下一章展开讲）
        //     feature: {  
        //         saveAsImage: {} //下载按钮
        //     } 
        // },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'line',
                smooth: 0.6, // 设置折线弧度
            }
        ]
    };

    var start_time = $('input[name="start_time"]').val();
    var end_time = $('input[name="end_time"]').val();
    var user_id = '{:$user_id}';


    $(function(){
        $.ajax({
            url:'{:url('topData')}',
            data:{user_id:user_id},
            type:'post',
            dataType:'json',
            success:function(data){
                var str = data['user_name'];
                if (data.prev_data != null) {
                    str += '<span class="prev-span">上月：'+data['prev_data']['bill_amount']+'</span>';
                }
                $('.top1').html(str);

                var str = data['bill_amount'];
                if (data.prev_data != null) {
                    str += '<span class="prev-span">上月：'+data['prev_data']['instance_num']+'</span>';
                }
                $('.top2').html(str);

                var str = data['bill_amount'];
                if (data.prev_data != null) {
                    str += '<span class="prev-span">上月：'+data['prev_data']['user_total']+'</span>';
                }
                $('.top3').html(str);

                var str = data['true_recharge'];
                if (data.prev_data != null) {
                    str += '<span class="prev-span">上月：'+data['prev_data']['new_user_num']+'</span>';
                }
                $('.top4').html(str);
            }
        });

        $("#cpslszb_sel").on('change',function(){
            var model_date = $(this).val();
            $.ajax({
                url:'{:url('cpslszb')}',
                data:{user_id:user_id,model_date:model_date},
                type:'post',
                dataType:'json',
                success:function(data){
                    if (data == null || data.length == 0) {
                        $('#cpslszb').html('无数据');
                    }else{
                        var option = jQuery.extend(true, {}, option_pie);
                        // option['title']['text'] = '产品占比';
                        option['series'][0]['name'] = '实例数量';
                        for(var i in data){
                            option['series'][0]['data'].push({value: data[i]['num'], name: data[i]['product_code']});
                        }
                        var myChart = echarts.init($('#cpslszb')[0],'customed');
                        myChart.setOption(option);
                    }
                    
                }
            });
        });
        $("#cpslszb_sel").trigger('change');

        $("#cpjezb_sel").on('change',function(){
            var model_date = $(this).val();
            $.ajax({
                url:'{:url('cpjezb')}',
                data:{user_id:user_id,model_date:model_date},
                type:'post',
                dataType:'json',
                success:function(data){
                    if (data == null || data.length == 0) {
                        $('#cpjezb').html('无数据');
                    }else{
                        var option = jQuery.extend(true, {}, option_pie);
                        // option['title']['text'] = '产品占比';
                        option['series'][0]['name'] = '金额';
                        for(var i in data){
                            option['series'][0]['data'].push({value: data[i]['num'], name: data[i]['product_code']});
                        }
                        var myChart = echarts.init($('#cpjezb')[0],'customed');
                        myChart.setOption(option);
                    }
                    
                }
            });
        });
        $("#cpjezb_sel").trigger('change');

        // 

        $.ajax({
            url:'{:url('mrxftj')}',
            data:{start_time:start_time,end_time:end_time,user_id:user_id},
            type:'post',
            dataType:'json',
            success:function(data){
                if (data == null || data.length == 0) {
                    $('#mrxftj').html('无数据');
                }else{
                    var option = jQuery.extend(true, {}, option_line);
                    // option['title']['text'] = '新增用户统计';
                    for(var i in data){
                        option['xAxis']['data'].push(data[i]['name']);
                        option['series'][0]['data'].push(data[i]['num']);
                    }
                    
                    // var myChart = echarts.init($('#oincheck_td')[0],'customed');
                    var myChart = echarts.init($('#mrxftj')[0],'customed');
                    myChart.setOption(option);
                }
            }
        });

        $.ajax({
            url:'{:url('mrcztj')}',
            data:{start_time:start_time,end_time:end_time,user_id:user_id},
            type:'post',
            dataType:'json',
            success:function(data){
                if (data == null || data.length == 0) {
                    $('#mrcztj').html('无数据');
                }else{
                    var option = jQuery.extend(true, {}, option_line);
                    // option['title']['text'] = '新增用户统计';
                    for(var i in data){
                        option['xAxis']['data'].push(data[i]['name']);
                        option['series'][0]['data'].push(data[i]['num']);
                    }
                    
                    // var myChart = echarts.init($('#oincheck_td')[0],'customed');
                    var myChart = echarts.init($('#mrcztj')[0],'customed');
                    myChart.setOption(option);
                }
            }
        });

    });        
    

    
    

    
</script>
</body>
</html>